Ordered list using CSS Counter-tricks in css

Counters are essentially variables maintained by CSS, and their values ​​can be incremented by CSS rules to track their usage.

HTML CODE:

<ul>
    <li>List item</li>
    <li>List item</li>
    <li>
        List item<ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
    </li>
</ul>

CSS CODE: 

ul {
    counter-reset: counter;
}
 
li::before {
    counter-increment: counter;
    content: counters(counter, '.') ' ';
}

Description

You can create an ordered list using any type of HTML.

1. counter-resetThe initialization counter is the name of the counter.By default, the counter starts at 0.This property can also be used to change its value to any specific number.

2. counter-incrementUsed in countable elements.counter-resetThe value of the counter can be increased or decreased afteroneinitialization.

3. counter(name, style)Displays the value of the segment counter.Generally used forcontentproperty.This function can accept two parameters, the first parameter as the name of the counter and the second parameter can bedecimalorupper-roman(bydecimaldefault).

4. counters(counter, string, style) Displays the value of the segment counter. Generally used for contentproperty.This function can accept three parameters, the first parameter as the name of the counter, the second parameter can include the string after the counter, and the third parameter can bedecimalorupper-roman(bydecimal default).

5. CSS counters are especially useful for generating outline lists because new instances of counters are automatically created in child elements. Use counters()functions to insert delimited text between nested counters at different levels.